<script setup lang="ts">
import { ref, nextTick } from "vue"
import { propsListType } from "@/components/Table/type"
import type { ElTable } from "element-plus"
import { useUserStore } from "@/store/modules/user"
import { storeToRefs } from "pinia"

interface IProps {
  data: any
  /** 表头配置 */
  propsList: propsListType[]
  /** 是否展示checkbox */
  showCheckBox?: boolean
  /** 分页器总数据  */
  total: number
  /** 是否显示边框  */
  isBorder?: boolean
  /** 表头 内容是否居中  */
  headerAlign?: "right" | "center" | "left"
  /** checkbox 宽度  */
  selectWidth?: number
  /** 表格高度  */
  maxHeight?: string
  /** 是否显示序号  */
  index?: boolean
  /** 序号名称  */
  indexName?: string
  /** 序号宽度  */
  indexWidth?: number
  /** 是否显示分页  */
  showPaging?: boolean
}
enum USERROLE {
  ROOT = "root",
  /** 超级管理员 */
  SUPERADMIN = "1",
  /** 普通管理员 */
  ADMIN = "2"
}
withDefaults(defineProps<IProps>(), {
  isBorder: false,
  showCheckBox: false,
  headerAlign: "left",
  selectWidth: 100,
  index: false,
  maxHeight: "660px",
  indexName: "序号",
  indexWidth: 80,
  showPaging: true
})

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const emit = defineEmits(["changeSize", "changePage", "select"])
const pageSize = ref<number>(10)
const currentPage = ref<number>(1)

const handleSizeChange = (size: number) => {
  pageSize.value = size
  emit("changeSize", size)
}
const handleCurrentChange = (pages: number) => {
  currentPage.value = pages
  emit("changePage", pages)
}

const indexMethod = (index: number) => {
  return index + (currentPage.value - 1) * pageSize.value + 1
}

const handleSelectionChange = (val: any[]) => {
  // const ids = val.map((item) => item.id)
  emit("select", val)
}

const clearSelected = () => {
  nextTick(() => {
    multipleTableRef.value?.clearSelection()
  })
}

const handleSelectable = (row: any) => {
  if (USERROLE.ROOT === userInfo.value.user_number) {
    return true
  }
  if (row.user_role === USERROLE.SUPERADMIN) {
    return false
  } else {
    return true
  }
}

defineExpose({
  clearSelected
})
</script>
<template>
  <div>
    <!-- 表格 -->
    <el-table
      ref="multipleTableRef"
      row-key="id"
      :border="isBorder"
      :max-height="maxHeight"
      class="table_container"
      :data="data"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :align="headerAlign"
        :header-align="headerAlign"
        :reserve-selection="true"
        v-if="showCheckBox"
        class-name="api-checkbox"
        type="selection"
        :selectable="handleSelectable"
        :width="selectWidth"
      />

      <el-table-column
        :align="headerAlign"
        :header-align="headerAlign"
        v-if="index"
        type="index"
        :index="indexMethod"
        :label="indexName"
        :width="indexWidth"
      />

      <template v-for="item of propsList" :key="item.prop">
        <template v-if="item.type === 'time'">
          <el-table-column
            :align="headerAlign"
            :header-align="headerAlign"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row[item.prop as string] }}
            </template>
          </el-table-column>
        </template>

        <template v-else-if="item.type === 'custom'">
          <el-table-column
            :align="headerAlign"
            :header-align="headerAlign"
            :label="item.label"
            :width="item.width"
            show-overflow-tooltip
          >
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope" />
            </template>
          </el-table-column>
        </template>

        <template v-else-if="item.type === 'handler'">
          <el-table-column :align="headerAlign" :header-align="headerAlign" :label="item.label" :width="item.width">
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope" />
            </template>
          </el-table-column>
        </template>

        <template v-else>
          <el-table-column :align="headerAlign" :header-align="headerAlign" v-bind="item" show-overflow-tooltip />
        </template>
      </template>

      <template #empty>
        <div h-168px flex items-center justify-center>暂无数据~</div>
      </template>
    </el-table>

    <!-- 分页器 -->

    <div v-if="total && showPaging" flex justify-between bg-white items-center px-16px>
      <div text-14px flex>
        <span>共{{ total }}条记录</span>
        <span ml-1>第{{ currentPage }} / {{ Math.ceil(total / pageSize) }}页</span>
      </div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        size="small"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_container {
  :deep(.el-table__header) {
    height: 60px !important;
    th {
      background-color: #fafafa !important;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
    }
  }

  :deep(.el-table__row) {
    height: 60px !important;

    &:hover {
      .el-table__cell {
        background-color: #f0f8ff !important;
      }
    }
  }
}

:deep(.el-pagination) {
  height: 48px;
  background: #fff;

  display: flex;
  justify-content: end;
}
</style>
